<template>
  <div>
    <a-range-picker
      v-model="dateRange"
      :show-time="{ format: 'HH:mm' }"
      format="YYYY-MM-DD HH:mm"
      :placeholder="['开始时间', '结束时间']"
    ></a-range-picker>
    <a-button @click="queryData">查询</a-button>

    <a-row>
      <a-col :span="12">
        <a-table
          :data-source="pics"
          :columns="columns"
          size="small"
          :row-key="
            (r) => {
              return r.file_name;
            }
          "
        >
          <a slot="name" slot-scope="text, record" @click="showPic(record)">{{
            text
          }}</a>
        </a-table>
      </a-col>
      <a-col :span="12">
        <a-card>
          <img
            slot="cover"
            alt="example"
            :src="curURL"
          />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { queryPic } from "@/services/pic";
import moment from "moment";
const columns = [
  {
    title: "文件",
    dataIndex: "file_name",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "抓图时间",
    dataIndex: "snap_time",
  },
  {
    title: "摄像机",
    dataIndex: "ipc_name",
  },
  {
    title: "站点",
    dataIndex: "station_name",
  },
];
export default {
  data() {
    return {
      dateRange: [],
      columns,
      pics: [],
      curURL:"",
    };
  },
  methods: {
    queryData() {
      let begin =
        this.dateRange && this.dateRange.length > 0
          ? moment(this.dateRange[0]).format("YYYY-MM-DD HH:mm")
          : "";
      let end =
        this.dateRange && this.dateRange.length > 1
          ? moment(this.dateRange[1]).format("YYYY-MM-DD HH:mm")
          : "";
      queryPic("", begin, end).then((res) => {
        if (res && res.data && res.data.result) {
          console.log("&&&&&&&&&&&&&&&&", res.data.result);
          res.data.result.forEach(item => {
            item.snap_time = moment(item.snap_time).utcOffset('+0800').format()
          })
          console.log(res.data.result)
          this.pics =  res.data.result
        }
      });
    },
    showPic(record) {
        this.curURL = record.file_name
        console.log(this.curURL)
    },
  },
};
</script>